<template>
	<view class="sxran-im-tabs-body">
		<view class="sxran-im-tabs-item" :class='{active : (item.code || index) == active}' @click="change(item.code || index)" v-for="(item, index) in tabs" :key="index">
			<view class="tabs-icom-body">
				<uni-icons :type="item.icon" :size="20"
					:color="(item.code || index) == active ? 'var(--uni-color-primary)' : 'var(--uni-text-color)'" />
				<sxran-im-badge :max="maxBadge" :value="item.badgeText" :isDot='isDot' absolute :offset="offset"></sxran-im-badge>
			</view>
			
			<text class="text" >{{item.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'sxran-im-tabs',
		props: {
			active: {
				type: [Number,String],
				default: 1
			},
			isDot:{
				type:Boolean,
				default:false
			},
			isBadge:{
				type:Boolean,
				default:false
			},
			maxBadge:{
				type:Number,
				default:99
			},
			offset:{
				type:Array,
				default:()=>[0,-10]
			},
			tabs: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {}
		},
		methods: {
			change(code) {
				this.$emit('change', code);

			},
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-tabs-body {
		display: flex;
		
		.sxran-im-tabs-item {
			padding: $uni-spacing-col-lg 0;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			color: var(--uni-text-color);
			.tabs-icom-body{
				position: relative;
			}
			.text {
				font-size: $uni-font-size-sm;
			}

			/* #ifdef H5 */
			&:hover .text {
				color: var(--uni-color-primary);
			}
			
			&:hover {
				background-color: var(--uni-bg-color-hover);
				:deep(.uni-icons) {
					color: var(--uni-color-primary) !important;
				}
			}
			/* #endif */
			
		}
		.active {
			.text {
				color: var(--uni-color-primary) !important;
			}
			:deep(.u-text__value){
				color: var(--uni-color-primary) !important;
			}
			:deep(.uni-icons) {
				color: var(--uni-color-primary) !important;
			}
		}
	}
</style>